import React, { useState } from "react";
import { Button } from "antd-mobile";
import "./MyButton.scss";

export default function MyButton(props) {
  // props包含<Button></Button>组件里的所有属性
  let options = { ...props };
  let { children, onClick: handleClick } = options;
  delete options.children;

  // 状态
  let [loading, setLoading] = useState(false);

  // 点击事件
  const handleClickFn = async () => {
    setLoading(true);

    try {
      await handleClick(); // handleClick方法是父组件传过来的方法，等待它执行完毕再取消loading
    } catch (error) {
      console.log(error);
    }
    setLoading(false);
  };

  // 如果父组件没传点击事件，则需要把我们的点击事件传进去；没有传点击事件，则不给他绑定点击事件。
  // 由于下面通过解构options，因此onClick方法也能被绑定进去
  if (handleClick) options.onClick = handleClickFn;

  return (
    <Button {...options} loading={loading}>
      {children}
    </Button>
  );
}
